<template>
  <div>
    <el-row>
      <el-button-group>
        <el-button
          :type="t.isCheck?'primary':''"
          size="mini"
          v-for="(t,i) in buttionOption"
          :key="i"
          @click="buttonClick(t.key)"
        >{{t.label}}</el-button>
      </el-button-group>
    </el-row>
    <div id="productionValueTable"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
var seriesLabel = {
  normal: {
    show: true,
    textBorderColor: '#52CCA1',
    textBorderWidth: 2
  }
}
let option = {
  color: ['#52CCA1'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: { left: 70, top: 0, },
  xAxis: {
    type: 'value',
    name: '元',
    // axisLabel: {
    //   formatter: '{value}'
    // }
  },
  yAxis: {
    type: 'category',
    inverse: true,
    data: [],
  },
  series: [
    {
      type: 'bar',
      data: [],
      // label: seriesLabel,
    },
  ]
};
export default {
  props: {
    list: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },
  watch: {
    list: {
      deep: true,
      handler (nv, ov) {
        if (Object.keys(nv).length > 0)
          this.rednerCharData();
      }
    }
  },
  data () {
    return {
      chart: {},
      buttionOption: [
        { key: 'day', label: '日', isCheck: true, },
        { key: 'week', label: '周', isCheck: false, },
        { key: 'month', label: '月', isCheck: false, }],//日 周 月
      dataColum: [
        { key: 'maintainNum', label: '维修台次',value: 0 ,},
        { key: 'maintainPrice', label: '维修产值', value: 0, },
        { key: 'pretend', label: '装潢', value: 0 ,},
        { key: 'netProfitPrice', label: '维修毛利', value: 0, },
        { key: 'renewalPrice', label: '续保', value: 0 ,},
      ]
    }
  },
  methods: {
    buttonClick (key) {
      this.buttionOption.map(item => {
        item.isCheck = item.key == key
      });
      this.rednerCharData();
    },
    setDataColumValue (soureData) {
      this.dataColum.map(item => {
        item.value = soureData[item.key] ? soureData[item.key] : 0;
      })
    },
    getKey () {
      let activeKey = { name: '', key: '' };
      this.buttionOption.map(item => {
        if (item.isCheck) {
          activeKey.key = item.key;
          activeKey.name = item.label;
        }
      })
      return activeKey;
    },
    getData () {
      let activeKey = '';
      this.buttionOption.map(item => {
        if (item.isCheck) {
          activeKey = item.key;
        }
      })
      if (Object.keys(this.list).length > 0) {
        return this.list[activeKey];
      } else {
        let obj = {};
        let keys = this.dataColum.map(item => { return item.key })
        keys.map(item => {
          obj[item] = 0;
        })
        return obj
      }
    },
    rednerCharData () {
      let _option = Object.assign({}, option);
      let activeData = this.getData();
      this.setDataColumValue(activeData);
      _option.yAxis.data = this.dataColum.map(item => { return item.label });
      //弹出层 单位显示
      // _option.series[0].name = this.getKey().name;
      console.log('_option.series[0]', _option.series[0])
      _option.series[0].data = this.dataColum.map(item => { return item.value });
      this.chart.setOption(_option)
    },
  },
  mounted () {
    this.chart = echarts.init(document.getElementById("productionValueTable"))
    this.rednerCharData();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize', this.__resizeHanlder)
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-button-group {
  padding: 5px;
}
#productionValueTable {
  // margin-top: -60px;
  height: 280px;
}
</style>